<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算属性</title>
	</head>
	<body>
		<!-- {{}} 两个大括号叫做插值表达式 -->
		
		<div id="app">
			<!-- 需：将数据字符翻转输出
			     方法1：将数据拆分为数组，翻转后，再将数组转化为字符串
				 拆数组 用 split() 
				 翻转数据是 reverse()
				 将数组转化为字符串
				 使用join() 转化
				 
			 -->
			用于输入：<input v-model.lazy="msg"/>
			数据展示：{{msg.split('').reverse().join('')}}
				<hr >
			计算属性的操作：{{reverse}}
			<!-- 面试题：计算属性与方法的区别 -->
		                1 计算属性如果调用多次。则有缓存的机制。只计算一次
						 2.方法计算没有没有缓存的机制，调用几次就执行几次
						 
						 选择：如果是计算重复的首选计算属性
			<!-- 方法想要在当前位置展现数据就需要在方法了返回值return -->
			<!--  计算属性的用法：将需要计算的操作通过特定的方法先计算之后再-->
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<script>
		const app=new Vue({
			el: '#app',
			data: {
				
				msg: ''
				
			},
			// 定义我们的操作方法
			methods: {
				expand(){
					this.age=10+this.age
				},
				reverseMe(){
					console.log("方法的计算属性")
					this.msg=
				}
			
				
			},
			
			// 定义我们的计算属性
			computed: {
				// 定义的方法必须要有返回值
				reverse(){
					return this.msg.split('').reverse().join('')
				}
				
			}
			
			
		})
		
		</script>
		
		
	</body>
</html>
